import { App } from 'vue'
import { createRouter, createWebHistory,RouteRecordRaw } from 'vue-router'
import { setupRouterGuard } from './guard'
import { ViewLogin, ViewIndex, ViewHome, ViewAbout, ViewUserprofile } from '@/enums'

const routes: Array<RouteRecordRaw> = [
    { 
        path: ViewLogin.Path,
        component: () => import('@/views/login/Index.vue')
    },
    {
        path: ViewIndex.Path,
        redirect: ViewHome.Path,
        component: () => import('@/layout/Index.vue'),
        children: [
            {
                path: ViewHome.Path,
                name: ViewHome.Name,
                component: () => import('@/views/home/Index.vue')
            },
            {
                path: ViewAbout.Path,
                name: ViewAbout.Name,
                component: () => import('@/views/about/Index.vue')
            },
            {
                path: ViewUserprofile.Path,
                name: ViewUserprofile.Name,
                component: () => import('@/views/userprofile/Index.vue')
            },
            {
                name: '404',
                path: '404',
                meta: {
                    key: '404',
                    title: '404'
                },
                component: () => import('@/views/error/404.vue')
            },
            {
                path: '/:pathMatch(.*)',
                redirect: '/404'
            }
        ]
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

export const setupRouter = async (app: App) => {
    await setupRouterGuard(router)
    app.use(router)
}
